<template>

  <a-card size="small" :bordered="false" :hoverable="true">
    <a-row class="smart-table-btn-block">
      <div class="smart-table-operate-block">
        <a-button @click="showForm()" type="primary" size="small">

          一键平台获取
        </a-button>
        <a-button @click="openCorporat" type="link" size="small">
          企业认证
        </a-button>
        <!-- <span style="color: #999;"> | </span> -->
        <a-button @click="reset" type="link" size="small">
          刷新
        </a-button>

      </div>
      <div class="smart-table-setting-block">
        <TableOperator v-model="columns" :tableId="null" :refresh="reset" />
      </div>
    </a-row>
    <a-table :scroll="{ x: 1000 }" 
      size="small" :dataSource="tableData" :columns="columns" rowKey="id" :pagination="false" :loading="tableLoading"
      bordered>
      <template #bodyCell="{ column, record, text }">
        <template v-if="column.dataIndex === 'action'">
          <div class="smart-table-operate">
            <a-button @click="showForm(record)" type="link">编辑</a-button>
            <a-button @click="confirmDelete(record)" danger type="link">刪除 </a-button>
          </div>
        </template>
      </template>
    </a-table>
    <div class="smart-query-table-page">
      <a-pagination showSizeChanger showQuickJumper show-less-items :pageSizeOptions="PAGE_SIZE_OPTIONS"
        :defaultPageSize="pageable.pageSize" v-model:current="pageable.pageNum" v-model:pageSize="pageable.pageSize"
        :total="pageable.total" @change="handleSizeChange" :show-total="(total) => `共total条`" />
    </div>
    <!-- <baseFormModal ref="baseFormRef" @refresh="ajaxQuery" /> -->
    <UpdateFormModal ref="updateFormModal" @refresh="ajaxQuery" />
    <a-modal
      v-model:visible="showCorporatModal"
      title="企业安全认证"
      :footer="null"
      width="500px"
      @cancel="handleCorporatCancel"
    >
      <div style="margin-bottom: 16px;">
        使用 <span style="color: #ff7a45;">企业或法人</span> 认证，验证 <span style="color: #fa541c;">合睿智能委客(佛山)有限公司</span> 的身份
      </div>
      <a-form layout="vertical">
        <a-form-item label="">
          <a-input v-model:value="corporatForm.creditCode" readonly />
        </a-form-item>
        <a-form-item label="">
          <a-select v-model:value="corporatForm.role" :options="roleOptions" />
        </a-form-item>
        <a-form-item label="">
          <a-select v-model:value="corporatForm.phone" :options="phoneOptions" />
        </a-form-item>
        <a-form-item label="">
          <a-input-password v-model:value="corporatForm.password" />
        </a-form-item>
        <a-form-item label="">
          <a-input-group compact>
            <a-input v-model:value="corporatForm.smsCode" style="width: 60%" placeholder="请输入短信验证码" />
            <a-button style="width: 38%; margin-left: 2%" @click="getSmsCode">获取短信验证码</a-button>
          </a-input-group>
        </a-form-item>
        <a-form-item>
          <a-checkbox v-model:checked="corporatForm.agree">
            我已阅读并同意 <a href="#" target="_blank">《授权协议》</a>
          </a-checkbox>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" block @click="handleCorporatOk">确认</a-button>
        </a-form-item>
      </a-form>
    </a-modal>
  </a-card>
</template>
<script setup>
import { reactive, ref, onMounted, computed } from 'vue';
import { message, Modal } from 'ant-design-vue';
import { SearchOutlined, ReloadOutlined, PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
import dayjs from 'dayjs';
import { useTable } from '/@/hooks/useTable';
import { useHandleData } from '/@/hooks/useHandleData';
import DictSelect from '/@/components/cache/dict-select.vue'
import { SERVICE_ID_ENUM, DICT_TYPE_ENUM } from '/@/constants/system/cache-service-id-const';
import { PAGE_SIZE_OPTIONS } from '/@/constants/common-const';
import { useRouter } from 'vue-router';
import TableOperator from '/@/components/support/table-operator/index.vue';
import { TABLE_ID_CONST } from '/@/constants/support/table-id-const';
// import baseFormModal from './components/base-form-mddal.vue';
import { taskApi } from '/@/api/task/task-api';

  
const {
  tableData,
  pageable,
  searchParam,
  searchInitParam,
  isShowPage,
  getTableList,
  search,
  reset,
  tableLoading,
  handleSizeChange,
} = useTable(taskApi.getTestPage);
// --------------------------- 表格 ---------------------------
const columns = ref([
  {
    title: '发票号码',
    dataIndex: 'customerName',
  },
  {
    title: '货物、应税劳务及服务',
    dataIndex: 'customerNo',
    //width: 100,
  },
  {
    title: '签收状态',
    dataIndex: 'customerType',
    //width: 100,
  },
  {
    title: '购方名称',
    dataIndex: 'customerManager',
    //width: 100,
  },
  {
    title: '不含税金额',
    //width: 100,
    dataIndex: 'serviceAdvisor',
  },
  {
    title: '税率',
    //width: 100,
    dataIndex: 'serviceStatus',
  },
  {
    title: '税额',
    //width: 100,
    dataIndex: 'customerLevel',
  },
  {
    title: '价税合计',
    width: 120,
    dataIndex: 'vatType',
  },
  {
    title: '操作',
    dataIndex: 'action',
    fixed: 'right',
    //width: 100,
  },
]);

//多选
let selectedRowKeys = ref([]);
let selectedRows = ref([]);
// 是否有选中：用于 批量操作按钮的禁用
const hasSelected = computed(() => selectedRowKeys.value.length > 0);

function onSelectChange(keyArray, selectRows) {
  selectedRowKeys.value = keyArray;
  selectedRows.value = selectRows;

}
const baseFormRef = ref();
function showForm(data) {
  baseFormRef.value.showModal(data);
}


// --------------------------- 删除 ---------------------------

async function confirmDelete(row) {
  let params = { id: row.id };
  await useHandleData(invoiceApi.delete, params, '确认删除吗');
}

async function confirmBatchDelete() {
  if (selectedRowKeys.value.length === 0) {
    message.warning('请选择要删除的数据');
    return;
  }
  
  Modal.confirm({
    title: '确认删除',
    content: `确定要删除选中的 ${selectedRowKeys.value.length} 条数据吗？`,
    onOk: async () => {
      try {
        for (const id of selectedRowKeys.value) {
          await invoiceApi.delete(id);
        }
        message.success('批量删除成功');
        selectedRowKeys.value = [];
        selectedRows.value = [];
        search(); // 刷新列表
      } catch (error) {
        message.error('批量删除失败');
      }
    }
  });
}

// 添加ajaxQuery函数，用于组件刷新
function ajaxQuery() {
  search();
}

// 企业认证弹窗相关
const showCorporatModal = ref(false);
const corporatForm = reactive({
  creditCode: '91440605MA5471RM2R',
  role: '办职员',
  phone: '135****8660',
  password: '',
  smsCode: '',
  agree: false,
});
const roleOptions = [
  { label: '办职员', value: '办职员' },
  { label: '管理员', value: '管理员' },
];
const phoneOptions = [
  { label: '135****8660', value: '135****8660' },
];
function openCorporat() {
  showCorporatModal.value = true;
}
function handleCorporatOk() {
  if (!corporatForm.agree) {
    message.warning('请先阅读并同意协议');
    return;
  }
  // 这里可以添加表单校验和提交逻辑
  showCorporatModal.value = false;
  message.success('认证成功');
}
function handleCorporatCancel() {
  showCorporatModal.value = false;
}
function getSmsCode() {
  message.success('验证码已发送');
}

</script>
<style lang="less" scoped></style>
